<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单商城 - 商品列表</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="auth.css">
</head>
<body>
    <div class="user-status" id="userStatus">
        <!-- 用户状态将通过JavaScript动态更新 -->
    </div>
    <header>
        <h1>简单商城</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="login.html" id="loginLink">登录</a>
            <a href="register.html" id="registerLink">注册</a>
            <a href="cart.html" id="cartLink" class="cart-link" style="display: none;">
                购物车 <span class="cart-count">0</span>
            </a>
        </nav>
    </header>
    
    <main class="product-grid">
        <div class="product-card" data-id="1">
            <img src="images/sneakers.jpg" alt="运动鞋">
            <h2>时尚运动鞋</h2>
            <p class="price">¥299.00</p>
            <button class="buy-button" style="display: none;" 
                    onclick="handleAddToCart('1', '时尚运动鞋', 299.00, 'images/sneakers.jpg')">
                加入购物车
            </button>
            <p class="login-tip" style="display: none; color: #666; text-align: center;">
                请<a href="login.html">登录</a>后购买
            </p>
        </div>

        <div class="product-card" data-id="2">
            <img src="images/watch.jpg" alt="手表">
            <h2>精致手表</h2>
            <p class="price">¥1299.00</p>
            <button class="buy-button" style="display: none;"
                    onclick="handleAddToCart('2', '精致手表', 1299.00, 'images/watch.jpg')">
                加入购物车
            </button>
            <p class="login-tip" style="display: none; color: #666; text-align: center;">
                请<a href="login.html">登录</a>后购买
            </p>
        </div>

        <div class="product-card" data-id="3">
            <img src="images/bag.jpg" alt="手提包">
            <h2>真皮手提包</h2>
            <p class="price">¥899.00</p>
            <button class="buy-button" style="display: none;"
                    onclick="handleAddToCart('3', '真皮手提包', 899.00, 'images/bag.jpg')">
                加入购物车
            </button>
            <p class="login-tip" style="display: none; color: #666; text-align: center;">
                请<a href="login.html">登录</a>后购买
            </p>
        </div>
    </main>

    <footer>
        <p>© 2025 简单商城 - 示例项目</p>
    </footer>

    <script>
        // 更新用户状态显示
        function updateUserStatus() {
            const currentUser = localStorage.getItem('currentUser');
            const userStatus = document.getElementById('userStatus');
            const loginLink = document.getElementById('loginLink');
            const registerLink = document.getElementById('registerLink');
            const buyButtons = document.querySelectorAll('.buy-button');
            const loginTips = document.querySelectorAll('.login-tip');

            if (currentUser) {
                // 更新用户状态栏
                userStatus.innerHTML = `
                    <span>欢迎，${currentUser}</span>
                    <button onclick="handleLogout()">退出登录</button>
                `;
                
                // 隐藏登录注册链接
                loginLink.style.display = 'none';
                registerLink.style.display = 'none';
                
                // 显示购买按钮，隐藏登录提示
                buyButtons.forEach(btn => btn.style.display = 'block');
                loginTips.forEach(tip => tip.style.display = 'none');
            } else {
                // 更新用户状态栏
                userStatus.innerHTML = `
                    <span>游客，请登录</span>
                `;
                
                // 显示登录注册链接
                loginLink.style.display = 'inline';
                registerLink.style.display = 'inline';
                
                // 隐藏购买按钮，显示登录提示
                buyButtons.forEach(btn => btn.style.display = 'none');
                loginTips.forEach(tip => tip.style.display = 'block');
            }
        }

        // 处理退出登录
        function handleLogout() {
            localStorage.removeItem('currentUser');
            updateUserStatus();
            alert('已退出登录');
        }

        // 获取购物车数据
        function getCart() {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return {};
            
            const cartData = localStorage.getItem(`cart_${currentUser}`);
            return cartData ? JSON.parse(cartData) : {};
        }

        // 保存购物车数据
        function saveCart(cart) {
            const currentUser = localStorage.getItem('currentUser');
            if (!currentUser) return;
            
            localStorage.setItem(`cart_${currentUser}`, JSON.stringify(cart));
            updateCartCount();
        }

        // 更新购物车数量显示
        function updateCartCount() {
            const cart = getCart();
            const count = Object.values(cart).reduce((total, item) => total + item.quantity, 0);
            const cartCount = document.querySelector('.cart-count');
            if (cartCount) {
                cartCount.textContent = count;
            }
        }

        // 处理加入购物车
        function handleAddToCart(productId, productName, price, image) {
            const cart = getCart();
            
            if (cart[productId]) {
                cart[productId].quantity += 1;
            } else {
                cart[productId] = {
                    name: productName,
                    price: price,
                    image: image,
                    quantity: 1
                };
            }
            
            saveCart(cart);
            
            // 显示添加成功提示
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = `已将 ${productName} 加入购物车`;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // 页面加载时更新用户状态和购物车
        window.onload = function() {
            updateUserStatus();
            updateCartCount();
        }
    </script>
</body>
</html>